<script lang="ts" setup>
import { computed } from "vue";

// const emits = defineEmits(["laypage", "currentChange", "sizeChange"]);
const emits = defineEmits<{
   (e: "laypage", id: Laypage): void;
   (e: "sizeChange", num: number): void;
   (e: "currentChange", num: number): void;
}>();

const props = defineProps<{
   laypage: Laypage;
}>();

const laypage = computed({
   get: () => props.laypage,
   set: value => emits("laypage", value)
});
</script>

<template>
   <div class="pagination shadowCard">
      <div class="slot">
         <slot name="left"></slot>
      </div>
      <el-pagination
         background
         :total="laypage.total"
         :page-size="laypage.pageSize"
         :current-page="laypage.pageNum"
         :page-sizes="[20, 30, 50, 100]"
         layout="total, ->, sizes, prev, pager, next, jumper"
         @update:current-page="(num: number) => emits('currentChange', num)"
         @update:page-size="(num: number) => emits('sizeChange', num)">
      </el-pagination>
      <div class="slot">
         <slot name="right"></slot>
      </div>
   </div>
</template>

<style lang="scss" scoped>
.pagination {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-block: 10px;
   padding-inline: 15px;
   box-sizing: border-box;
   flex-shrink: 0;
   margin-top: 15px;

   .slot {
      display: block;
      flex: 1;
   }
}
</style>
